<template>
  <div>
    <div class="app-container flex-box">
      <div class="container">
        <el-row>
          <el-col :span="8">
            <el-form :rules="formRules" ref="dataForm_duanxin" :model="charge_bean" label-position="left" label-width="140px"
                     style='width: 400px; margin-left:50px;border:1px solid #efefef;padding:30px;'>
              <template>
                <div class="title">短信充值</div>
                <div class="num">剩余 <span class="red-font">{{bean.sms_num}}</span> 条</div>
                <div class="price">单价 <span class="red-font">0.1</span> 元</div>
                <el-form-item label="充值条数" prop="duanxin" label-width="80px">
                  <el-input v-model.number="charge_bean.duanxin" placeholder="充值条数" ></el-input>
                </el-form-item>
              </template>
              <div class="center_btn">
                <el-button type="primary" @click="doChargeDuanxin" >购买</el-button>
              </div>
            </el-form>
          </el-col>
          <el-col :span="8">
            <el-form :rules="formRules2" ref="dataForm_card" :model="charge_bean" label-position="left" label-width="140px"
                     style='width: 400px; margin-left:50px;border:1px solid #efefef;padding:30px;'>
              <template>
                <div class="title">身份证扫描充值</div>
                <div class="num">剩余身份证扫描 <span class="red-font">{{bean.identity_scan_num}}</span> 次</div>
                <div class="price">单价 <span class="red-font">0.1</span> 元</div>
                <el-form-item label="充值条数" prop="card"  label-width="80px">
                  <el-input v-model.number="charge_bean.card" placeholder="充值条数"></el-input>
                </el-form-item>
              </template>
              <div class="center_btn">
                <el-button type="primary" @click="doChargeCard">购买</el-button>
              </div>
            </el-form>
          </el-col>
          <el-col :span="8">
            <el-form :rules="formRules3" ref="dataForm_hongbao" :model="charge_bean" label-position="left" label-width="140px"
                     style='width: 400px; margin-left:50px;border:1px solid #efefef;padding:30px;'>
              <template>
                <div class="title">红包金额充值</div>
                <div class="num">剩余 <span class="red-font">{{bean.balance}}</span> 元</div>
                <el-form-item label="充值金额" prop="hongbao" style="margin-top:20px;"  label-width="80px">
                  <el-input v-model.number="charge_bean.hongbao" placeholder="充值金额" ></el-input>
                </el-form-item>
              </template>
              <div class="center_btn">
                <el-button type="primary" @click="doChargeHongbao" >购买</el-button>
              </div>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <div v-html="pay_html" style="opacity: 0"></div>
    </div>
  </div>
</template>
<script>
  import waves from '@/directive/waves' // 水波纹指令
  import API from '@/api'
  import Http from '@/http'
  import Store from '@/store'
  import Msg from '@/utils/msg'
  import Utils from '@/utils/common'
  import Validator from '@/utils/validate'
  import Auth from '@/auth'
  import _ from 'underscore'
  import Qiniu from '@/utils/qiniu'
  import {mapState, mapGetters} from 'vuex'
  import cityDate from '@/utils/city.js'


  export default {
    directives: {waves},
    data() {
      return {
        bean:{},
        charge_bean:{
          duanxin:"",
          card:"",
          hongbao:"",
        },
        formRules: {duanxin: [{required: true, message: '请填写次数', trigger: 'blur'}, { type: 'number', message: '次数必须为数字值'}],},
        formRules2: {card: [{required: true, message: '请填写次数', trigger: 'blur'}, { type: 'number', message: '次数必须为数字值'}],},
        formRules3: {hongbao: [{required: true, message: '请填写金额', trigger: 'blur'}, { type: 'number', message: '金额必须为数字值'}],},
        pay_html:""
      }
    },
    computed: {
      ...mapGetters(['user']),
    },
    components: {},
    created() {
      this.loadAccount()
    },
    methods: {
      loadAccount(){
        Http.getModel(API.SmsNum, {}, false).then((json) => {
          this.dealing = false
          if (json.code == 0) {
            this.bean = json.data
          } else {
            Msg.error(json.msg)
          }
        })
      },
      doChargeDuanxin() {
        this.$refs['dataForm_duanxin'].validate((valid) => {
          if (valid) {
            var price = (this.charge_bean.duanxin*0.1).toFixed(2);
            Msg.alert('需支付【'+price+'】元',()=>{
              var params = {
                type:1,
                amount:this.charge_bean.duanxin
              }
              Http.getModel(API.duanxin_pay, params, false).then((json) => {
                this.dealing = false
                if (json.code == 0) {
                 this.pay_html = json.data
                 setTimeout(
                    function(){
                      document.forms['alipaysubmit'].submit();
                    }
                  ,500)
                } else {
                  Msg.error(json.msg)
                }
              })
            })
          }
        })
      },
      doChargeCard() {
        this.$refs['dataForm_card'].validate((valid) => {
          if (valid) {
            var price = (this.charge_bean.card*0.1).toFixed(2);
            Msg.alert('需支付【'+price+'】元',()=>{
              var params = {
                type:2,
                amount:this.charge_bean.card
              }
              Http.getModel(API.duanxin_pay, params, false).then((json) => {
                this.dealing = false
                if (json.code == 0) {
                  this.pay_html = json.data
                  setTimeout(
                    function(){
                      document.forms['alipaysubmit'].submit();
                    }
                    ,500)
                } else {
                  Msg.error(json.msg)
                }
              })
            })
          }
        })
      },
      doChargeHongbao() {
        this.$refs['dataForm_hongbao'].validate((valid) => {
          if (valid) {
            Msg.alert('需支付【'+hongbao+'】元',()=>{
              var params = {
                price:this.charge_bean.hongbao
              }
              Http.getModel(API.redRecharge, params, false).then((json) => {
                this.dealing = false
                if (json.code == 0) {
                  this.pay_html = json.data
                  setTimeout(
                    function(){
                      document.forms['alipaysubmit'].submit();
                    }
                    ,500)
                } else {
                  Msg.error(json.msg)
                }
              })
            })
          }
        })
      },
    }
  }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
  .container {
    margin: 40px auto;
    padding: 40px;
    .title {
      font-size: 15px;
      font-weight: bold;
      text-align: center;
      line-height: 3.2em;
    }
    .num{
      text-align:center;
      font-size:14px;
      line-height:1.4;
      .red-font{
        font-size:16px;
        font-weight:bold;
        color:#ff3333;
      }
    }
    .price{
      text-align:center;
      font-size:12px;
      line-height:1.4;
      margin-bottom:12px;
      .red-font{
        font-size:14px;
        font-weight:bold;
        color:#ff3333;
      }
    }
    .center_btn {
      button {
        margin: 20px auto;
        display: block;
      }
    }
  }

  .el-row {
    margin-bottom: 20px;
    line-height: 40px;
    .gray-text {
      color: #aaa;
      text-align: left;
    }
    .border-col {
    }
  }

  .open-btn {
    display: block;
  }

</style>
